<template>
	<view class="main-page">
		<swiper class="banner" autoplay circular :indicator-dots="bannerList.length > 1">
			<swiper-item v-for="(bannerItem , bannerIndex) in bannerList" :key="bannerIndex">
				<image class="banner-img" :src="bannerItem"></image>
			</swiper-item>
		</swiper>
		<view :class="[hasScroll ? 'top-box-white' : 'top-box']" @click="clickAddress">
			<image src="../../static/common/ic_location_yellow.png" 
			class="location-ic" v-if="hasScroll"></image>
			<image src="../../static/common/ic_location_white.png"
			class="location-ic" v-else></image>
			<text class="location-text" style="color: #333333;" v-if="hasScroll">
				{{addressStr}}</text>
			<text class="location-text" v-else>
				{{addressStr}}</text>
		</view>
		<view class="options-box-fixed" v-if="hasFlow">
			<view class="single-option" @click="changeOptions(0)">
				<text class="chosen-option" v-if="optionIndex == 0">综合排序</text>
				<text class="grey-option" v-else>综合排序</text>
			</view>
			<view class="single-option" @click="changeOptions(1)">
				<text class="chosen-option" v-if="optionIndex == 1">距离优先</text>
				<text class="grey-option" v-else>距离优先</text>
			</view>
			<view class="single-option" @click="changeOptions(2)">
				<text class="chosen-option" v-if="optionIndex == 2">餐补优先</text>
				<text class="grey-option" v-else>餐补优先</text>
			</view>
			<view class="single-option">
				<text class="grey-option" style="color: #FF621F;">上新时间</text>
			</view>
		</view>
		<image class="search-img" src="../../static/index/bg_search.png" @click="gotoSearch"></image>
		<view class="ad-box">
			<image class="single-ad" src="../../static/index/ic_ad_meituan.png"></image>
			<image class="single-ad" src="../../static/index/ic_ad_ele.png"></image>
		</view>
		
		<view class="enterance-box">
			<view class="row-container-center" style="width: 100%;">
				<view class="single-enterace" @click="changeChosenEnterance(0)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 0"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_1.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 0">霸王餐</text>
					<text class="font-333-26" style="z-index: 30;" v-else>霸王餐</text>
				</view>
				<view class="single-enterace" @click="changeChosenEnterance(1)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 1"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_2.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 1">品牌商家</text>
					<text class="font-333-26" style="z-index: 30;" v-else>品牌商家</text>
				</view>
				<view class="single-enterace" @click="changeChosenEnterance(2)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 2"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_3.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 2">快餐简餐</text>
					<text class="font-333-26" style="z-index: 30;" v-else>快餐简餐</text>
				</view>
				<view class="single-enterace" @click="changeChosenEnterance(3)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 3"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_4.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 3">粉面汤粥</text>
					<text class="font-333-26" style="z-index: 30;" v-else>粉面汤粥</text>
				</view>
			</view>
			<view class="row-container-center" style="width: 100%;margin-top: 6rpx;">
				<view class="single-enterace" @click="changeChosenEnterance(4)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 4"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_5.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 4">甜点饮料</text>
					<text class="font-333-26" style="z-index: 30;" v-else>甜点饮料</text>
				</view>
				<view class="single-enterace" @click="changeChosenEnterance(5)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 5"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_6.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 5 ">西餐小吃</text>
					<text class="font-333-26" style="z-index: 30;" v-else>西餐小吃</text>
				</view>
				<view class="single-enterace" @click="changeChosenEnterance(6)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 6"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_7.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 6">卤味烧烤</text>
					<text class="font-333-26" style="z-index: 30;" v-else>卤味烧烤</text>
				</view>
				<view class="single-enterace" @click="changeChosenEnterance(7)">
					<view class="chosen-enterance" v-if="chosenEntranceIndex == 7"></view>
					<image class="entrance-img" src="../../static/index/ic_enterance_8.png"></image>
					<text class="font-333-26" style="z-index: 30;font-weight: 600;"  v-if="chosenEntranceIndex == 7">线下探店</text>
					<text class="font-333-26" style="z-index: 30;" v-else>线下探店</text>
				</view>
			</view>
		</view>
		
		<view class="option-box">
			<view class="single-option" @click="changeOptions(0)">
				<text class="chosen-option" v-if="optionIndex == 0">综合排序</text>
				<text class="default-option" v-else>综合排序</text>
			</view>
			<view class="single-option" @click="changeOptions(1)">
				<text class="chosen-option" v-if="optionIndex == 1">距离优先</text>
				<text class="default-option" v-else>距离优先</text>
			</view>
			<view class="single-option" @click="changeOptions(2)">
				<text class="chosen-option" v-if="optionIndex == 2">餐补优先</text>
				<text class="default-option" v-else>餐补优先</text>
			</view>
			<view class="single-option">
				<text class="default-option" style="color: #FF621F;">上新时间</text>
			</view>
		</view>
		
		<view class="column-container" style="width: 100%;">
			<view class="list-box" v-if="listData.length > 0">
				<view class="list-item" v-for="(item , index) in listData" :key="index" @click="gotoActDetail(item)">
					<view class="row-container-row-between" style="width: 100%;">
						<view class="row-container">
							<view class="img-box">
								<image class="shop-img" src="../../static/index/ic_list_img.png"></image>
								<image class="tag" src="../../static/index/ic_tag_ele.png" 
								mode="heightFix" style="left: 0;"></image>
								<image class="tag" src="../../static/index/ic_tag_around_new.png"
								mode="heightFix" style="right: 0;"></image>
							</view>
							<view class="column-container">
								<text class="title font-333-34" style="font-weight: bold;line-height: 47rpx;">LELEFU乐乐芙网红生日乐乐芙网红生日</text>
								<text class="title font-ff621f-24" style="font-weight: bold;margin-top: 5rpx;">LELEFU限定:芒果淋面小清新生日蛋糕芒果淋面小清新生日蛋糕</text>
								<text class="title font-ca993a-24" style="margin-top: 5rpx;">*指定商品，注意看要求</text>
								<text class="title font-666-24" style="margin-top: 5rpx;">该店离您3.9km</text>
							</view>
						</view>
						<view class="coupon-box">
							<text class="font-fff6e9-24" style="margin-top: 10rpx;">返红包</text>
							<view class="money-box">
								<text class="font-ff4015-40" style="font-weight: bold;">30</text>
								<text class="font-333-20" style="font-weight: bold;margin-top: 10rpx;">元</text>
							</view>
						</view>
					</view>
					<view class="row-container-row-between" style="width: 100%;margin-top: 24rpx;">
						<view class="row-container">
							<text class="act-name">品鉴  |  满60返30</text>
						</view>
						<view class="row-container">
							<!-- <progress class="progress-bar" active-color="#FFD100"
							backgroundColor="#F0F0F0" percent="50" border-radius="5"></progress> -->
							<uv-line-progress
							active-color="#FFD100" 
							inactive-color="#F0F0F0"
							class="progress-bar"
							height="5"
							percentage="50"
							:showText="false"></uv-line-progress>
							
							<text class="font-666-26">今天剩余5份</text>
						</view>
					</view>
				</view>
			</view>
			<NoData v-else hint="更多商家正在加入,敬请期待"></NoData>
		</view>
	</view>
</template>

<script>
	import bannerImg from '../../static/index/bg_header_index.png'
	import QQMapWx from '../../assets/qqmap-wx-jssdk.js'
	import NoData from '../../components/NoData.vue'
	
	export default {
		data() {
			return {
				topFlowBox:{
					background:'white'
				},
				bannerList:[bannerImg],
				addressStr:'获取定位',
				lat:'',
				lng:'',
				showNoLocation:false,
				page:1,
				chosenEntranceIndex:-1, // 选择的顶部筛选下标
				optionIndex:-1,
				listData:[1,2,3,4,5,6,7,8,9],
				hasFlow:false , //是否开启排序悬浮
				hasScroll:false, //是否页面滑动
			}
		},
		
		components:{
			NoData
		},
		
		onLoad() {
			this.checkLocation()
		},
		
		onPageScroll(res) {
			if (res.scrollTop >= 50){
				this.hasScroll = true
			} else{
				this.hasScroll = false
			}
			
			if (res.scrollTop >= 450){
				this.hasFlow = true
			} else{
				this.hasFlow = false
			}
		},
		
		methods: {
			clickAddress(){
				uni.showToast({
					title:'自动获得当前位置不需要修改地址',
					icon:'none'
				})
			},
			
			//检测是否有定位权限
			checkLocation(){
				let that = this
				uni.getSetting({
					success(res0) {
						//没有调起过定位
						if (!Object.keys(res0.authSetting).includes('scope.userLocation')) {
							that.showNoLocation = false
							that.getLocation()
							return
						}
						//已经调起了授权 并且已拒绝
						if (!res0.authSetting['scope.userLocation']) {
							that.showNoLocation = true
							// that.loadBanner()
						} else{
							that.showNoLocation = false
							that.getLocation()
						}	
						
					},
					fail(e) {
						console.log('getSetting--failed---' + JSON.stringify(e))
					}
					
				})
			},
			
			getLocation(){
				let that = this
				const tMap = new QQMapWx({
					key:"GATBZ-NT6C2-3NFUR-C5W2X-GSDUZ-5DBK4"
				})
				uni.authorize({
					scope:'scope.userLocation',
					success(authRes) {
						console.log('authorize----' + JSON.stringify(authRes))
						uni.getLocation({
							type:"gcj02",
							isHighAccuracy:'true',
							success(locationRes) {
								console.log('location--------',JSON.stringify(locationRes))
								that.lng = locationRes.longitude
								that.lat = locationRes.latitude
								that.cookie.set("sc_lng" , that.longitude)
								that.cookie.set("sc_lat" , that.latitude)
								
								that.page = 1
								// that.loadBanner()
								// that.loadIndexList()
							},
							fail(e) {
								console.log("location---获取经纬度失败---" + JSON.stringify(e))
							},
							complete() {
								tMap.reverseGeocoder({
									location:{
										latitude:that.lat,
										longitude:that.lng
									},
									success(tMapRes){
										console.log("解析地址成功", tMapRes);
										that.addressStr = tMapRes.result.formatted_addresses.recommend
										// that.addressStr = tMapRes.result.address_reference.town.title
									}
								})
							}
						})
					},
					fail(authErr) {
						that.showNoLocation = true
					}
				})
			},
			
			//修改顶部筛选
			changeChosenEnterance(index){
				if (this.chosenEntranceIndex == index){
					this.chosenEntranceIndex = -1
				} else{
					this.chosenEntranceIndex = index
				}
			},
			
			//修改排序
			changeOptions(index){
				if (this.optionIndex == index){
					this.optionIndex = -1
				} else{
					this.optionIndex = index
				}
			},
			
			//搜索
			gotoSearch(){
				uni.navigateTo({
					url:'./search'
				})
			},
			
			//跳转活动详情
			gotoActDetail(item){
				uni.navigateTo({
					url:'./actDetail'
				})
			}
			
			
			
			
			
		}
	}
</script>

<style lang="scss">
	.top-box{
		width: 100%;
		height: 88rpx;
		padding-top: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		z-index: 50;
	}
	
	.top-box-white{
		width: 100%;
		height: 88rpx;
		padding-top: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		z-index: 50;
		background: white;
	}
	
	.location-ic{
		width: 40rpx;
		height: 40rpx;
		margin-right: 4rpx;
		margin-left: 30rpx;
	}
	
	.location-text{
		max-width: 300rpx;
		font-size: 32rpx;
		color: white;
		font-weight: 600;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.banner{
		position: absolute;
		top: 0;
		width: 100%;
		height: 626rpx;
		
		.banner-img{
			width: 100%;
			height: 100%;
		}
	}
	
	.search-img{
		width: calc(100% - 60rpx);
		height: 68rpx;
		margin-top: 186rpx;
		margin-left: 30rpx;
		z-index: 20;
	}
	
	.ad-box{
		width: calc(100% - 78rpx);
		height: 176rpx;
		margin: 234rpx 30rpx 20rpx 30rpx;
		padding: 0rpx 9rpx;
		background: white;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		z-index: 40;
		
		.single-ad{
			width: 318rpx;
			height: 140rpx;
			margin: 0rpx 9rpx;
		}
	}
	
	.enterance-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 78rpx);
		margin:0rpx 30rpx 20rpx 30rpx;
		padding: 21rpx 9rpx;
		background: white;
		border-radius: 16rpx;
		z-index: 20;
		
		.single-enterace{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 168rpx;
			height: 176rpx;
			position: relative;
			
			.chosen-enterance{
				width: 144rpx;
				height: 176rpx;
				background: rgba(255, 209, 0, 0.1);
				border: #FFD100 solid 1rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0;
			}
			
			.entrance-img{
				width: 90rpx;
				height: 90rpx;
				z-index: 30;
				margin-bottom: 16rpx;
			}
		}
	}
	
	.option-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 46rpx);
		margin-left: 23rpx;
		margin-bottom: 20rpx;
	}
	
	.options-box-fixed{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 46rpx);
		background: white;
		padding: 20rpx 23rpx;
		position: fixed;
		top: 174rpx;
		z-index: 40;
	}
	
	.single-option{
		flex-grow: 1;
		height: 60rpx;
		margin: 0rpx 7rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		.default-option{
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #666666;
			font-size: 26rpx;
			background: white;
			border-radius: 10rpx;
		}
		
		.grey-option{
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #666666;
			font-size: 26rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
		}
		
		.chosen-option{
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #333333;
			font-weight: 600;
			font-size: 26rpx;
			background: #FFD100;
			border-radius: 10rpx;
		}
		
	}
	
	.list-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		
		.list-item{
			display: flex;
			flex-direction: column;
			width: calc(100% - 36rpx);
			padding: 18rpx;
			background: white;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			
			.img-box{
				display: flex;
				flex-direction: row;
				width: 165rpx;
				height: 165rpx;
				margin-right: 18rpx;
				position: relative;
				flex-shrink: 0;
				
				.shop-img{
					width: 165rpx;
					height: 165rpx;
				}
				
				.tag{
					height: 34rpx;
					position: absolute;
				}
			}
			
			.title{
				max-width: 350rpx;
				white-space: nowrap;
				word-wrap: break-word;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 33rpx;
			}
			
			.coupon-box{
				background: linear-gradient(90deg, #FF621F 0%, #FF1F1F 100%);
				width: 100rpx;
				height: 144rpx;
				display: flex;
				flex-direction: column;
				margin-left: 18rpx;
				flex-shrink: 0;
				align-items: center;
				border-radius: 10rpx;
				position: relative;
				
				.money-box{
					width: 96rpx;
					height: 89rpx;
					background: #FFF6E9;
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					position: absolute;
					bottom: 2rpx;
				}
			}
			
			.act-name{
				background: #FFD100;
				border-radius: 8rpx;
				padding: 4rpx 12rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: 600;
				margin-right: 10rpx;
				text-align: center;
			}
			
			.progress-bar{
				width: 66rpx;
				height: 10rpx;
				margin-right: 16rpx;
				border-radius: 10rpx;
			}
			
		}
	}
</style>
